﻿<%@ Page Title="添加用户" Language="C#" MasterPageFile="~/master/m.master" %>
<script runat="server"></script>
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
    <link href="../assets/css/plugins/iCheck/custom.css" rel="stylesheet" />
<link href="../assets/css/system/addUser.css" rel="stylesheet" />
<link href="../assets/img/validate/validate.css" rel="stylesheet">
<style type="text/css">
.checkbox label{
	padding: 0;
}
/*图片样式*/
        img.face {
            max-width: 200px;
            max-height: 200px;
        }

        button.fa:before {
            margin-right: 5px;
        }

        dl {
        }

            dl dt {
                float: left;
                text-align: right;
                padding: 0 15px;
            }

            dl dd {
                float: left;
                width: calc(100%-50px);
            }

        nav ul.pagination {
            margin: 0;
        }

        #pro-list-choosen div.thumbnail > img,
        #pro-list-to-choose div.thumbnail > img {
            height: 58px;
        }

        div.thumbnail > .caption > h4 {
            white-space: nowrap;
            overflow: hidden;
        }

        .mix-images div.thumbnail > img {
            height: 250px;
        }

        ul.product-color-list {
            margin: 0;
            padding: 0;
        }

            ul.product-color-list li {
                float: left;
                width: 250px;
                margin: 5px;
                border: 1px solid #efefef;
                list-style: none;
            }

                ul.product-color-list li.selected {
                    border: 1px solid #ff1493;
                }
                label {
                       margin: 12px 0px 10px 1px;
                }
</style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="main" runat="Server">
    <div class="add-user-page">
        <form id="checkModuleForm">
        	<div id="message" style="display: none"></div>
            <div class="base-info">
                <table class="user-info" cellpadding="0" cellspacing="0">
                    <thead></thead>
                    <tbody>
                        <tr>
                            <td>
                                <div class="form-group">
                                    <label class="control-label">用户昵称&nbsp;&nbsp;</label>
                                    <input id="UserName" name="UserName" placeholder="请输入用户昵称" 
                                    	datacol="yes" err="用户昵称" checkexpession="NotNull"
                                    	maxlength="10" class="form-control input-text required" />
                                </div>
                            </td>
                            <td>
                                <div class="form-group">
                                    <label class="control-label">用户编号&nbsp;&nbsp;</label>
                                    <input id="UserNo" name="UserNo" placeholder="请输入用户编号" 
                                    	datacol="yes" err="用户编号" checkexpession="NotNull"
                                    	maxlength="10" class="form-control input-text required" />
                                </div>
                            </td>
                        </tr>

                        <tr>
                            <td>
                                <div class="form-group">
                                    <label class="control-label">登录账号&nbsp;&nbsp;</label>
                                    <input id="LoginAccount" name="LoginAccount" placeholder="请输入登录账号" 
                                    	datacol="yes" err="登录账号" checkexpession="NotNull"
                                    	maxlength="20" class="form-control input-text required" />
                                </div>
                            </td>
                            <td>
                            	<div class="form-group">
                                    <label class="control-label">手机号码&nbsp;&nbsp;</label>
                                    <input id="Tel" name="Tel" maxlength="11" placeholder="请输入手机号码" 
                                    	class="form-control input-text" />
                                </div>
                            </td>
                        </tr>

                        <tr>
                            <td>
                                <div class="form-group">
                                    <label class="control-label">电子邮箱&nbsp;&nbsp;</label>
                                    <input id="Email" name="Email" placeholder="在此输入电子邮箱" 
                                    	datacol="yes" err="电子邮箱" checkexpession="EmailOrNull"
                                    	maxlength="20" class="form-control input-text" />
                                </div>
                            </td>
                            <td>
                                <div class="form-group">
                                    <label class="control-label">员工类别&nbsp;&nbsp;</label>
                                    <select id="UserType" class="form-control m-b col-select">
                                        <option value="1">系统账号</option>
                                        <option value="2">普通账号</option>
                                    </select>
                                </div>
                            </td>
                        </tr>

                        <tr>
                            <td>
                                <div class="form-group">
                                    <label class="control-label">用户性别</label>
                                    <div class="radio i-checks">
                                        <label>
                                            <span class="gender-text">男</span>
                                            <input type="radio" checked="" value="1" name="Sex" />
                                        </label>
                                    </div>
                                    <div class="radio i-checks">
                                        <label>
                                            <span class="gender-text">女</span>
                                            <input type="radio" value="0" name="Sex" />
                                        </label>
                                    </div>
                                </div>
                            </td>
                            <td>
                                <div class="form-group">
                                    <label class="control-label">员工状态&nbsp;&nbsp;</label>
                                    <select id="UserStatus" class="form-control m-b col-select">
                                        <option value="1">在职</option>
                                        <option value="2">离职</option>
                                    </select>
                                </div>
                            </td>
                        </tr>

                        <tr>
                            <td colspan="2">
                                <div class="form-group address-info">
                                    <label class="control-label">所在地区&nbsp;&nbsp;</label>
                                    <select id="Province" class="form-control m-b col-select-addr province">
                                    </select>

                                    <select id="City" class="form-control m-b col-select-addr">
                                    </select>

                                    <select id="Area" class="form-control m-b col-select-addr">
                                    </select>
                                </div>
                            </td>
                        </tr>

                        <tr>
                            <td colspan="2">
                                <div class="form-group">
                                    <label class="control-label">详细地址&nbsp;&nbsp;</label>
                                    <input id="Address" maxlength="50" placeholder="在此输入详细地址"
                                    	name="Address" class="form-control input-text-full" />
                                </div>
                            </td>
                        </tr>

                        <tr>
                            <td>
                                <div class="form-group">
                                    <label class="control-label">入职日期&nbsp;&nbsp;</label>
                                    <input id="EntryDate" class="form-control layer-date input-text" readonly="readonly"
                                        placeholder="入职日期" />
                                </div>
                            </td>
                            <td>
                                <div class="form-group">
                                    <label class="control-label">所在岗位&nbsp;&nbsp;</label>
                                    <select id="PostID" class="form-control m-b col-select">
                                    </select>
                                </div>
                            </td>
                        </tr>

                        <tr>
                            <td>
                                <div class="form-group">
                                    <label class="control-label">是否有效&nbsp;&nbsp;</label>
                                    <div class="checkbox i-checks">
                                        <label class="effective">
                                            <input id="IsEffective" type="checkbox" checked="">
                                        </label>
                                    </div>
                                </div>
                            </td>
                            <td>
                                <div class="form-group">
                                    <label class="control-label">系统类型&nbsp;&nbsp;</label>
                                    <select id="SysType" class="form-control m-b col-select">
                                    </select>
                                </div>
                            </td>
                        </tr>

                        <tr>
                            <td colspan="2">
                                <div class="form-group">
                                    <label class="control-label multi">备注说明&nbsp;&nbsp;</label>
                                    <textarea id="Memo" name="Memo" placeholder="在此输入备注说明" 
                                    	class="form-control input-textarea"></textarea>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="userhead-info">
                <div class="col col-xs-4 col-sm-4 col-md-4 col-lg-3">
                                <div class="row">
                                    <div class="" style="line-height: 25px; border-bottom: 1px solid #ccc; padding-left: 10px; padding-top: 5px;">用户头像</div>
                                </div>
                                <div class="row ">
                                        <div class="panel panel-primary">
                                            <div class="panel-body">
                                                <div class="row">
                                                    <div class="progress">
                                                        <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; width: 0%;">0%</div>
                                                    </div>
                                                    <div class="mix-images"></div>
                                                    <div class="col col-xs-12 upload-panel">
                                                        <div class="thumbnail">
                                                            <div id="div-addImage" style="width: 100%; text-align: center; border: 1px solid #cacaca; padding: 58px 0;"><i class="fa fa-plus fa-5x"></i></div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="panel-footer hidden">
                                                <div style="display: none">
                                                    <input type="file" multiple="multiple" accept="image/jpeg" />
                                                </div>
                                                <p>
                                                    <button type="button" class="btn btn-warning fa fa-upload">上传</button></p>
                                            </div>
                                        </div>
                                    </div>
                            </div>
            </div>
            <div class="control">
                <button type="button" class="btn btn-white closeBtn">关闭</button>
                <button type="button" class="btn btn-primary" id="save">保存</button>
            </div>
        </form>
    </div>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="footer" runat="Server">
    <script src="../assets/js/plugins/layer/laydate/laydate.js"></script>
<script src="../assets/js/plugins/iCheck/icheck.min.js"></script>
<script type="text/javascript">
    var BASE_URL = '../assets/js/plugins/webuploader';
</script>
<script src="../assets/js/page/addressConfig.js"></script>
<script src="../assets/js/common.js"></script>
<script src="../assets/img/validate/learunui-validator.js"></script>
<%--图片处理--%>
<script src="../assets/js/bootbox.min.js"></script>
    <div style="display: none">
        <div id="dialog-product-choose-color">
            <ul class="product-color-list "></ul>
        </div>
    </div>
    <script id="p1" type="text/html">
        <div class="col col-xs-12">
            <div class="thumbnail">
                <img src="../assets/img/s.gif" style="background-image: url({{d.Url}}); background-size: contain; background-repeat: no-repeat; background-position: center;" />
                <div class="caption">
                    <p>
                        <button type="button" class="btn btn-danger fa fa-remove" data-id="{{d.ID}}">移除</button>
                    </p>
                </div>
            </div>
        </div>
    </script>
<script type="application/javascript">
$(document).ready(function () {
	//用于记录input file的流对象
	var eFiles = null;
	
    //初始化单选框、复选框样式
    $(".i-checks").iCheck({
        checkboxClass: "icheckbox_square-green",
        radioClass: "iradio_square-green"
    });
    
    //限制textarea输入字数
	commonUtil.inputLimitForId('Memo',50);
    
    //关闭当前标签页
    var closeActiveTab = function () {
        var closeBtn = $('.J_menuTab.active i', window.parent.document);
        closeBtn.click();
    }
    $('.closeBtn').click(function () {
        closeActiveTab();
    });

    //初始化日期控件
    laydate({
    	elem: "#EntryDate",
        format: "YYYY-MM-DD",
        min: "2000-01-01",
        max: "2099-12-01",
        istime: true,
        istoday: false,
        choose: function (datas) {
            start.min = datas
        }
    });

    //初始化省份
    addressConfig.p.map(function (item) {
        $('#Province').append('<option value="' + item + '">' + item + '</option>');
    });
    //加载城市
    var loadCity = function (p) {
        var p = $('#Province').val();
        $('#City').empty();
        addressConfig['c'][p].map(function (item) {
            $('#City').append('<option value="' + item + '">' + item + '</option>');
        })
    };
    //加载区/县
    var loadArea = function () {
        var pc = $('#Province').val() + '-' + $('#City').val();
        $('#Area').empty();
        addressConfig['a'][pc].map(function (item) {
            $('#Area').append('<option value="' + item + '">' + item + '</option>');
        })
    }
    //初始化城市
    loadCity();
    //初始化区
    loadArea();
    //选择省份
    $('#Province').change(function () {
        //填充城市
        loadCity();
        //填充区/县
        loadArea();
    });
    //选择城市
    $('#City').change(function () {
        //填充区/县
        loadArea();
    });

    //获取部门id
    var deptId = Y.getUrlParam('deptId');

    //获取岗位
    layer.msg('玩命加载中……', {icon: 16, shade: 0.5, time:0, maxWidth:200});
    Y.API2('Post', 'GetList', {
        DeptID: deptId,
    }, function (data) {
        layer.closeAll('dialog');
        if (data.Success == false) {
        	swal(data.Message, '', 'error');
        } else {
            var html = '';
            data.map(function (item, i) {
                html += '<option value="' + item.PostID + '">' + item.PostName + '</option>';
            })
            $('#PostID').append(html);
        }
    });

    //加载系统类型
    Y.API2('SysDict', 'GetList', {
        DictValue: "C-System",
    }, function (result) {
        layer.closeAll('dialog');
        if (result.Success == false) {
            swal(result.Message, '', 'error');
        } else {
            var html = '';
            var count = 0;
            result.map(function (item) {
                html += '<option value="' + item.DictValue + '">' + item.DictName + '</option>';
            })
            $('#SysType').append(html);
        }
    });
    
    //图片处理
    $('.progress').hide();

    function deleteImage(id) {
        A.API('Image', 'Remove', {
            id: id
        }, function (data) {
            $('.upload-panel').fadeIn();
        });
    }

    function addImage(file) {
        file.Url = Y.GetPath(file.Url);
        var tpl = laytpl(document.getElementById('p1').innerHTML);
        $(tpl).empty();
        var result = tpl.render(file);
        var el = $(result);
        var btnRemove = el.find('button.fa-remove');
        btnRemove.click(function () {
            swal({
                title: "您确定要删除这张图片吗",
                text: "删除后将无法恢复，请谨慎操作！",
                type: "warning",
                showCancelButton: true,
                confirmButtonColor: "#DD6B55",
                confirmButtonText: "删除",
                closeOnConfirm: false
            }, function () {
                deleteImage($(btnRemove).data('id'));
                $(btnRemove).parents('div.col:first').remove();
                swal("删除成功！", "您已经永久删除了这条信息。", "success");
                //$('.upload-panel').fadeIn();
            });
        });
        $('.mix-images').append(el);
    }

    function addOldImage(file) {
        file.Url = Y.GetPath(file.Url);
        var tpl = laytpl(document.getElementById('p1').innerHTML);
        var result = tpl.render(file);
        var el = $(result);
        var btnRemove = el.find('button.fa-remove');
        btnRemove.click(function () {
            swal({
                title: "您确定要删除这张图片吗",
                text: "删除后将无法恢复，请谨慎操作！",
                type: "warning",
                showCancelButton: true,
                confirmButtonColor: "#DD6B55",
                confirmButtonText: "删除",
                closeOnConfirm: false
            }, function () {
                deleteImage($(btnRemove).data('id'));
                $(btnRemove).parents('div.col:first').remove();
                swal("删除成功！", "您已经永久删除了这条信息。", "success");
                //$('.upload-panel').fadeIn();
            });
        });
        $('.mix-images').append(el);
    }

    Kmer.Uploader({
        el: 'input[type=file]',
        Path: 'USER',
        OnProgress: function (f, pc) {
            $('.progress').show();
            $('.progress-bar').css('width', pc.toString() + '%').text(pc.toString() + '%');
        },
        OnAllComplete: function () {
            $('.progress').hide();
        },
        OnComplete: function (f, data) {
            if (data.Success === true) {
                var file = data.Data;
                addImage(file);
                $('.upload-panel').fadeOut();
            } else {
                bootbox.alert("上传错误，请重新选择图片（JPG、小于5Mbs）\n" + data.Message);
            }
        }
    });
    $('#div-addImage,button.fa-upload').click(function () {
        $('input[type=file]').click();
    });

    //保存
    $('#save').click(function () {
        //检验提交信息
        if (!CheckDataValid('#checkModuleForm')) {
            return false;
        }
        var imgs = [];
        var imgURL = null;
        imgURL = $(".thumbnail img").attr("src");
        $('div.mix-images button[data-id]').each(function (index, el) {
            imgs.push($(el).data('id'));
        });
        var img = imgs[0];
        layer.msg('玩命加载中……', {icon: 16, shade: 0.5, time:0, maxWidth:200});
        Y.API2('Users', 'Create', {
            UserNo: $('#UserNo').val(),
            UserName: $('#UserName').val(),
            LoginAccount: $('#LoginAccount').val(),
            Email: $('#Email').val(),
            UserType: $('#UserType').val(),
            UserStatus: $('#UserStatus').val(),
            Sex: $('.iradio_square-green.checked input').val(),
            EntryDate: $('#EntryDate').val(),
            Province: $('#Province').val(),
            City: $('#City').val(),
            Area: $('#Area').val(),
            Address: $('#Address').val(),
            Tel: $('#Tel').val(),
            DeptID: deptId,
            PostID: $('#PostID').val(),
            IsEffective: $('#IsEffective').is(':checked'),
            Memo: $('#Memo').val(),
            SysType:$('#SysType').val(),
            Avatar: img,
            ImageUrl: imgURL
        }, function (data) {
            layer.closeAll('dialog');
            if (data.Success == false) {
            	swal(data.Message, '', 'error');
            } else {
            	swal({
					title: '新增成功',
					type: 'success'
				},function(){
					//刷新用户管理页
					if(window.parent.frames['iframe9'])
						window.parent.frames['iframe9'].document.getElementById('refreshBtn').click();
					
					//关闭当前页面
					closeActiveTab();
				});
            }
        });
    });
});
</script>
</asp:Content>
